<template>
  <div class="top">
    <!-- 回到顶部 -->
    <template>
      <el-backtop target=".top" :bottom="200">
        <div
          style="{
            height: 100%;
            width: 100%;
            border-radius:50%;
            background-color: #386561;
            box-shadow: 0 0 6px rgba(0,0,0, .12);
            text-align: center;
            line-height: 40px;
            color: #fff;
          }"
        >
          <i class="el-icon-top"></i>
        </div>
      </el-backtop>
    </template>
    <!-- 导航 -->
    <div>
      <HeadNav />
    </div>
    <div>
      <Nav />
    </div>
    <!-- 广告 -->
    <div class="banner">
      <div class="container">
        <h5 class="text-white">We do awesome things</h5>
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="grid-content bg-purple">
              <p class="counter">2,879</p>
              <div class="stats-text">
                <h3 class="text-white">Weddings</h3>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple">
              <p class="counter">953</p>
              <div class="stats-text">
                <h3 class="text-white">Portraits</h3>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple">
              <p class="counter">1,546</p>
              <div class="stats-text">
                <h3 class="text-white">Urban Style</h3>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- 内容 -->
    <div class="content">
      <div class="container">
        <div class="contentBox">
          <div class="date-box">
            <div class="titleText">日期、时间：</div>
            <DatePicker @getDate='getDatefromson' />
            <SelectBox :options='options' @getTime='getTimefromson' />
          </div>
          <div class="date-box dianli">
            <div class="titleText">典礼类型：</div>
            <el-radio-group @change="change1" v-model="radio1">
              <el-radio-button id="aa" label="不限"></el-radio-button>
              <el-radio-button label="西式婚礼"></el-radio-button>
              <el-radio-button label="中式婚礼"></el-radio-button>
              <el-radio-button label="汉唐婚礼"></el-radio-button>
              <el-radio-button label="商务主持"></el-radio-button>
              <el-radio-button label="宴会主持"></el-radio-button>
            </el-radio-group>
          </div>
          <div class="date-box">
            <div class="titleText">主持人级别：</div>
            <el-radio-group @change="change2" v-model="radio2">
              <el-radio-button label="不限"></el-radio-button>
              <el-radio-button label="首席9000-20000"></el-radio-button>
              <el-radio-button label="金牌6000-9000"></el-radio-button>
              <el-radio-button label="资深3000-6000"></el-radio-button>
            </el-radio-group>
          </div>
          <div class="date-box">
            <div class="titleText">排序方式:</div>
            <el-radio-group @change="change3" v-model="radio3">
              <el-radio-button label="不限"></el-radio-button>
              <el-radio-button label="好评排序"></el-radio-button>
              <el-radio-button label="价格高->低"></el-radio-button>
              <el-radio-button label="价格低->高"></el-radio-button>
            </el-radio-group>
          </div>
          <div class="date-box">
            <div class="titleText">精准搜索:</div>
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
              <el-form-item label>
                <el-input v-model="formInline.user" placeholder="主持人名字（可不填）"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit">精准搜索</el-button>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="clearCheck">清空筛选条件</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <!-- 推荐主持人--默认显示默认页面 -->
        <Moren v-if="isShow" :morenList1='morenList1' :morenList2='morenList2' :morenList3='morenList3'/>
        <!-- 筛选页面 -->
        <Shaixuan v-else :list='list' :filterList='filterList' />
      </div>
    </div>
    <div>
      <Foot />
    </div>
  </div>
</template>

<script>
import HeadNav from "../../componnet/qiantai/HeadNav";
import Nav from "../../componnet/qiantai/Nav";
import Foot from "../../componnet/qiantai/Foot";
import SelectBox from "../../componnet/qiantai/SelectBox";
import DatePicker from "../Home/DatePicker";
import Moren from "./Moren";
import Shaixuan from "./Shaixuan";
import api from "../../api";

export default {
  name: "Toastmaster",
  data() {
    return {
      value: "",
      radio1: "不限",
      radio2: "不限",
      radio3: "不限",
      options: [
        {
          value: "上午",
          label: "上午"
        },
        {
          value: "下午",
          label: "下午"
        },
        {
          value: "晚上",
          label: "晚上"
        }
      ],
      formInline: {
        user: ""
      },
      hostlist: [],
      list: [],
      morenList1:[],
      morenList2:[],
      morenList3:[],
      filterForm: {
        grade: "",
        style: ""
      },
      isShow:true,
      //传给筛选页面的筛选关键词
      filterList:{
        time:'',
        date:'',
        jibie:'',
        type:'',
        order:''
      },
      
    };
  },
  components: {
    HeadNav,
    Nav,
    Foot,
    SelectBox,
    DatePicker,
    Moren,
    Shaixuan
  },
  mounted() {
    api.gethost().then(res => {      
      if (res.data.status == 200) {
        this.hostlist = res.data.data.result;
        // 默认分类的列表
        this.morenList1=this.hostlist.filter(item=>{
          return item['grade']=='首席'
        })
        this.morenList2=this.hostlist.filter(item=>{
          return item['grade']=='金牌'
        })
        this.morenList3=this.hostlist.filter(item=>{
          return item['grade']=='资深'
        })
        // console.log(this.morenList3);        
      } else {
        this.hostlist = [];
      }
    });
  },
  watch: {
    filterForm: {
      handler(val, oldVal) {
        if (val) {
          // 如果筛选条件全为空，查全部；否则按条件筛选
          if (
            this.filterForm.grade == "不限" &&
            this.filterForm.style == "不限"
          ) {
            
          } else {
            // /拿到有值的参数
            let tempFilter = {};
            for (var key in this.filterForm) {
              if (
                typeof this.filterForm[key] != "undefined" &&
                typeof this.filterForm[key] != "null" &&
                this.filterForm[key] != null &&
                this.filterForm[key] != ""
              ) {
                tempFilter[key] = this.filterForm[key];
              }
            }
            // console.log(tempFilter,'输出tempFilter')
            this.list = this.hostlist.filter(
              //筛选
              item => {
                let flag = false;
                for (key in tempFilter) {
                  console.log(key, "输出key");
                  if (
                    item[key].toString().indexOf(tempFilter[key].toString()) >=
                    0
                  ) {
                    flag = true;
                  } else {
                    flag = false;
                    break;
                  }
                }
                if (flag) {
                  return item;
                }
              }
            );
            console.log(this.list, "输出筛选结果");
          }
        }
      },
      deep: true
    }
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    },
    clearCheck() {
      console.log("清空筛选条件");
      this.radio1 = "不限";
      this.radio2 = "不限";
      this.radio3 = "不限";
      this.formInline.user = "";
      this.isShow=true;
    },
    change1(value) {
      this.filterList.type = value;
      this.filterForm.style=value;
      this.isShow=false;
    },
    change2(value) {
      this.filterList.jibie=value;
      this.filterForm.grade=value.slice(0,2);
      this.isShow=false;
    },
    change3(value) {
      console.log(value);
      this.filterList.order=value;
      this.isShow=false;
    },
    // 获取时间
    getTimefromson(data){
      this.filterList.time=data;
      // console.log(this.time);
    },
    //获取日期
    getDatefromson(data){
      this.filterList.date=data;
      // console.log(this.date);
    }
  }
};
</script>

<style scoped>
/* 广告部分 */
.banner {
  background: url(../../assets/imgs/t1.jpg) no-repeat 0px 0px;
  background-size: cover;
  padding: 60px 0;
}
.container {
  width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}
.text-white {
  font-size: 48px;
  text-transform: capitalize;
  text-align: left;
  color: #fff;
  font-weight: 500;
}
.banner h5 {
  margin: 40px 0 20px;
}
.counter {
  font-size: 68px;
  font-weight: 300;
  letter-spacing: 3px;
  color: #00b6e3;
  margin: 16px 0;
}
.stats-text h3 {
  font-size: 30px;
}
/* 内容 */
.contentBox > div {
  margin: 15px 0;
}
.date-box {
  height: 32px;
  line-height: 32px;
  display: flex;
}
.date-box > div {
  margin-right: 20px;
}
.contentBox .titleText {
  font-size: 20px;
  font-weight: 800;
  margin-right: 2px;
  width: 122px;
}
.el-radio-button {
  margin-right: 20px;
}
/* 单选去除边框未生效 */
#aa .el-radio-button__inner {
  border: 0px !important;
}
.date-box #aa:first-child .el-radio-button__inner {
  border-left: 0px solid #dcdfe6;
}
.top {
  height: 100vh;
  overflow-x: hidden;
}

</style>